<template>
    <div class="income-template" v-bind:dataValue="showLoading">
        <yd-navbar slot="navbar" title="分红记录" class="public-header">
            <span slot="left">
                <a href="javascript:window.history.go(-1)"><yd-navbar-back-icon></yd-navbar-back-icon></a>
            </span>
        </yd-navbar>
        <yd-slider autoplay="3000">
            <yd-slider-item v-for="item in resData.cover_pic">
                <a href="javascript:;">
                    <img :src="item">
                </a>
            </yd-slider-item>
        </yd-slider>
        <yd-grids-group :rows="2">
            <yd-grids-item>
                <div slot="text">
                    <div class="grids-icon">
                        <icon name="strikethrough" scale="1.5"></icon>
                    </div>
                    <p> 上月分红 {{resData.lastShare}}元</p>
                </div>
            </yd-grids-item>
            <yd-grids-item>
                <div slot="text">
                    <div class="grids-icon">
                        <icon name="th-list" scale="1.5"></icon>
                    </div>
                    <p>累计分红 {{resData.sumShare}}元</p>
                </div>
            </yd-grids-item>
            <yd-grids-item>
                <div slot="text">
                    <div class="grids-icon">
                        <icon name="text-height" scale="1.5"></icon>
                    </div>
                    <p>店铺资产 {{resData.assets}}元</p>
                </div>
            </yd-grids-item>
            <yd-grids-item>
                <div slot="text">
                    <div class="grids-icon">
                        <icon name="hand-o-up" scale="1.5"></icon>
                    </div>
                    <p>投资回报周期 {{resData.paybackPeriod}}天</p>
                </div>
            </yd-grids-item>
            <yd-grids-item>
                <div slot="text">
                    <div class="grids-icon">
                        <icon name="dedent" scale="1.5"></icon>
                    </div>
                    <p>投资回报率 {{resData.paybackPercent}}%</p>
                </div>
            </yd-grids-item>
        </yd-grids-group>
        <yd-cell-group title="分红记录">
            <yd-cell-item arrow v-for="item in list" @click.native="checkShowList(item)">
                <span slot="left">时间 {{item.month}}</span>
                <span slot="right">金额 {{item.share_amount}}</span>
            </yd-cell-item>
        </yd-cell-group>
        <yd-popup v-model="showListDetail" position="right" width="70%">
            <yd-cell-item>
                <span slot="left">时间 {{listDetial.month}}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">金额 {{listDetial.share_amount}}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">付款人 {{listDetial.shareholder.payname}}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">收款人 {{listDetial.shareholder.account_name}}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">开户行 {{listDetial.shareholder.bank_name}}</span>
            </yd-cell-item>
            <yd-cell-item>
                <span slot="left">账号 {{listDetial.shareholder.account_no}}</span>
            </yd-cell-item>
        </yd-popup>
        <yd-tabbar slot="tabbar" class="public-footer">
            <yd-tabbar-item title="首页" link="/">
                <yd-icon name="home" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="投资收益" link="/income" active>
                <yd-icon name="shopcart-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="信息交流" link="/message">
                <yd-icon name="like-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="个人中心" link="/user">
                <yd-icon name="ucenter-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
        </yd-tabbar>
    </div>
</template>
<script>
    import Ajax from "../api/ajax.js"
    import dataURL from "../data/dataURL.js"
    export default {
        data() {
            return {
                loadBloean: true,
                list: [{
                    "user_id": '',
                    "month": "''",
                    "shop_id": '',
                    "invest_amount": "",
                    "shop_percent": "",
                    "share_amount": "",
                    "payback_percent": "",
                    "shareholder": {
                        "bank_name": "",
                        "account_name": "",
                        "account_no": "",
                        "payname": ""
                    }
                }],
                showListDetail: false,
                showStore: false,
                listDetial: {
                    "user_id": '',
                    "month": "''",
                    "shop_id": '',
                    "invest_amount": "",
                    "shop_percent": "",
                    "share_amount": "",
                    "payback_percent": "",
                    "shareholder": {
                        "bank_name": "",
                        "account_name": "",
                        "account_no": "",
                        "payname": ""
                    }
                },
                resData: {
                    "shop_name": "",
                    "cover_pic": [],
                    "intro": "",
                    "sumShare": "", // 总分红
                    "lastShare": "", // 上次分红
                    "assets": '', // 店铺总资产
                    "paybackPeriod": '', // 投资回报周期
                    "paybackPercent": '', // 投资回报率
                    "shareList": [//分红记录列表
                        {
                            "user_id": '',
                            "month": "''",
                            "shop_id": '',
                            "invest_amount": "",
                            "shop_percent": "",
                            "share_amount": "",
                            "payback_percent": "",
                            "shareholder": {
                                "bank_name": "",
                                "account_name": "",
                                "account_no": "",
                                "payname": ""
                            }
                        }
                    ]
                }
            }
        },
        methods: {
            checkShowList(item) {
                this.showListDetail = true;
                console.log(item);
                this.listDetial = item;
            },
            async getData() {
                this.queryID = this.$route.query.id;
                try {
                    let res = await Ajax.Post(dataURL.income.bonus, {
                        shop_id: this.queryID
                    });
                    res.paybackPercent = res.paybackPercent.toFixed(3);
                    this.resData = res;
                    this.list = res.shareList;
                } catch (error) {
                    console.info("数据加载失败")
                }
                this.loadBloean = false;
            }
        },
        computed: {
            showLoading() {
                if (this.loadBloean) {
                    this.$dialog.loading.open('很快加载好了');
                } else {
                    this.$dialog.loading.close();
                }
            }
        },
        mounted() {
            this.getData();
        }
    }

</script>